<template>
	<view class="index relative">
		<u-sticky>
			<div class="nav" :style="{
				background: navBg,
				height: statusbarHeight + 'px'
			}">

			</div>
		</u-sticky>
		<!-- 首页头部背景 -->
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/index_bg@2x.png" class="nav-bg"
			mode="widthFix"></image>

		<div class="content">
			<div class="px-28 mt-32 relative">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/logo@3x.png" class="nav-logo"
					mode=""></image>

				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/yanhyua.gif" class="nav-gif"
					mode=""></image>

				<div class="scan" @click="scan">
					<u-icon name="scan" :bold="true" color="#FFF" size="72rpx"></u-icon>
				</div>
			</div>
			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/index-img@2x.png" class="w-full mt-48"
				mode="widthFix"></image>
			<div class="px-20">
				<!-- 富乐公社 -->
				<div class="fulegongshe mt-24 relative">
					<div class="relative w-full">
						<!-- <div class="shangdoudaren" @click="$tab.nav(`/pages/commodity/detail?id=${zichanId}`)">
							
						</div>
						<div class="shangdoujiaoyi" @click="$tab.nav('/pages/index/shangdoujiaoyi/index')">
							
						</div> -->
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/gongshezichanbao-2@3x.png"
							mode="widthFix" class="w-full round-24" style="box-shadow: 4rpx 4rpx 2rpx 0rpx #90553A;"
							@click="$tab.nav(`/pages/index/asset`)"></image>
					</div>

					<div class="mt-32 flex align-center justify-between" v-if="prodList.length > 0">
						<image :src="globalConfig.imagePrefix + item.cover" mode=""
							style="width: 260rpx;height: 260rpx;border-radius: 12rpx;" v-for="(item, index) in prodList"
							:key="item.id" @click="goShopDetal(item)"></image>

						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_gengduo@2x.png"
							style="width: 86rpx;height: 260rpx;" mode=""
							@click="$tab.nav(`/pages/commodity/list?columnType=5`)"></image>
					</div>

					<!-- <div class="flex align-center justify-between flex-wrap mt-32">
						<div class="round-24 hidden fulegongshe-shadow" style="font-size: 0;" v-for="(item,index) in sanList" :key="item.id"
							@click="goShopDetal(item)">
							<image :src="globalConfig.imagePrefix + item.cover" class="fulegongshe-li-img-1" mode="">
							</image>
							<div class="text-24 font-500 text-center bg-white py-12">
								{{item.name}}
							</div>
						</div>

						<image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/baiwanjullebu@3x.png"
							class="fulegongshe-li-img-2 mt-32" mode=""
							@click="$tab.nav(`/pages/commodity/list?columnType=7&title=创业联盟区`)"></image>

						<image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/xiaofeizengzhiqu@3x.png"
							class="fulegongshe-li-img-2 mt-32" mode=""
							@click="$tab.nav(`/pages/commodity/list?columnType=5&title=消费增值区`)"></image>

						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/duihuanqu@3x.png"
							class="fulegongshe-li-img-2 mt-32" mode=""
							@click="$tab.nav(`/pages/commodity/list?columnType=6&title=0元兑换区`)"></image>
					</div> -->
				</div>

				<!-- 商家专区 -->
				<div class="shangjiazhuanqu mt-48 relative">
					<!-- 底层背景 -->
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/shangjiazhuanqu@3x.png"
						class="shangjiazhuanqu-di" mode="">
					</image>
					<!-- 内容 -->
					<div class="shangjiazhuanqu-content">
						<!-- <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/bendishenghuo@3x.png"
							mode="widthFix" @click="$tab.nav(`/pages/shops/index`)"
							class="shangjiazhuanqu-chakanquanbu round-24"></image> -->
						<!-- 	<div class="shangjiazhuanqu-chakanquanbu text-FFF"
							>
							查看全部
						</div>
						 -->


						<div class="flex items-center justify-between">
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/shequ@2x.png"
								class="shangjiazhuanqu-img" mode="" @click="$tab.nav(`/pages/index/numStore/index`)">
							</image>
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zhekou@2x.png"
								class="shangjiazhuanqu-img" mode="" @click="$tab.nav(`/pages/index/discount/index`)">
							</image>
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/shangpin@2x.png"
								class="shangjiazhuanqu-img" mode=""
								@click="$tab.nav(`/pages/index/substitution/index`)"></image>
						</div>


					</div>

					<view class="py-16 px-24 bg-FFF round-16 mt-28 shop-box" v-for="(item, index) in shopList"
						:key="item.id" @click="goDetail(item.id)" style="background-color: #F7F6F4;">

						<view class="flex items-center justify-between">
							<image :src="handleUrl(item.logo)" class="round-8 shop-img" mode=""></image>
							<view class="flex items-center justify-between" style="width: 550rpx;">
								<view class="">
									<view class="u-line-1 text-32 pl-12 mb-16" style="width: 340rpx;">
										{{ item.name }}
									</view>
									<u-rate :value="5" activeColor="#F68000" readonly></u-rate>
								</view>

								<view class="go-shop text-center text-FFF text-24">
									进入店铺
								</view>
							</view>
						</view>

						<view class="flex items-center justify-between mt-16">
							<view class=" text-gray u-line-1">
								{{ item.address }}
							</view>
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_dianhua.png"
								mode="" class="image-52" @click.stop="$modal.makePhone(item.linkerMobile)"></image>
						</view>

						<view class="" v-if="item.mallSpuList && item.mallSpuList.length > 0">
							<u-divider></u-divider>

							<scroll-view scroll-x style="white-space: nowrap;">
								<view class="flex items-center">
									<view class="relative mr-24" v-for="(i, j) in item.mallSpuList" :key="i.id"
										@click.stop="$tab.nav(`/pages/commodity/detail?id=${i.id}&storeId=${i.storeId}`)"
										v-if="j < 5">
										<image :src="globalConfig.imagePrefix + i.cover" class="commodity" mode="">
										</image>
										<view class="price-comm pl-12 text-FFF">
											￥{{ i.nowPrice }}
										</view>
									</view>

									<view class="show-more" v-if="item.mallSpuList.length > 5">
										查看更多
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</div>

				<div class="py-16 bg-FFF mt-16 flex justify-around items-center" @click="$tab.nav(`/pages/shops/index`)"
					v-if="shopList.length > 0">
					<div class="flex items-center">
						<div class="" style="color: #753F3F;">
							查看全部门店
						</div>
						<u-icon name="arrow-right-double" color=" #753F3F" :blod="true"></u-icon>
					</div>
				</div>

				<!-- #ifndef MP-WEIXIN -->
				<!-- 企业专区 -->
				<div class="qiyezhuanqu mt-48">
					<div class="flex items-center justify-between"
						@click="$tab.nav(`/pages/index/video/vertical-swiper`)">
						<div class="flex items-center">
							<div class="font-700 text-FFF mr-16">
								品牌故事
							</div>
							<div class="" style="color: rgba(255,255,255,.5);">
								| 自媒体矩阵
							</div>
						</div>
						<div class="flex items-center">
							<div class="font-500 text-FFF">
								查看全部
							</div>
							<u-icon name="arrow-right" color="#FFF" :bold="true"></u-icon>
						</div>
					</div>
					<div class="qiye-line mt-24">

					</div>

					<div class="mt-24">
						<scroll-view scroll-x style="white-space: nowrap;">
							<div class="flex items-center">
								<div class="py-12 px-16 mr-32 round-4" v-for="(item, index) in qiyeTypeList"
									:key="item.id" :style="{
										background: qiyeTypeIndex == index ? '#F35D2A' : '#FFF',
										color: qiyeTypeIndex == index ? '#FFFFFF' : '#A4A4A4',
									}" @click="getQiyeVideoList(index)">
									{{ item.name }}
								</div>
							</div>
						</scroll-view>
					</div>

					<div class="mt-28">
						<scroll-view scroll-x style="white-space: nowrap;">
							<div class="flex items-center">
								<div class="mr-32 round-4 hidden" v-for="(item, index) in qiyeVideoList" :key="item.id"
									@click="$tab.nav(`/pages/index/video/vertical-swiper?index=${qiyeTypeIndex}&id=${item.id}`)"
									style="min-width: 560rpx;">
									<div class="poster" :style="{
										background: `url(${globalConfig.imagePrefix + item.icon}) no-repeat`,
										backgroundSize: '100% 100%'
									}">
										<image
											src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/icon_bofang@2x.png"
											mode="" class="play"></image>
									</div>
									<div class="py-24 px-16 bg-white">
										<div class="font-500">
											{{ item.title }}
										</div>
										<div class="text-24 mt-10" style="color: #999999;">
											{{ item.content }}
										</div>
									</div>
								</div>
							</div>
						</scroll-view>
					</div>

					<div class="mt-32 flex items-center justify-between">
						<!-- <image
							src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/quweiixiaofeijie@2x.png"
							class="quweiixiaofeijie" mode="" @click="$tab.nav(`/pages/index/activity/index`)"></image>

						<div class="flex flex-col justify-between" style="height: 306rpx;">
							<image
								src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/pingpaijiameng@2x.png"
								class="pingpaijiameng" mode="" @click="$tab.nav(`/pages/index/franchise/index`)">
							</image>

							<image
								src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/kuaguomaoyi@2x.png"
								class="pingpaijiameng" mode="" @click="$tab.nav(`/pages/index/trade/index`)"></image>
						</div> -->

						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/quweixiaofeijie@3x.png"
							class="quweiixiaofeijie round-24" mode="" @click="$tab.nav(`/pages/index/activity/index`)">
						</image>

						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/pingpaijiameng@3x.png"
							class="quweiixiaofeijie round-24" mode=""
							@click="$tab.nav(`/pages/index/franchise/list?type=1`)"></image>

						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/kuaguoshangmao@3x.png"
							class="quweiixiaofeijie round-24" mode="" @click="$tab.nav(`/pages/index/trade/index`)">
						</image>
					</div>
				</div>

				<!-- 城市服务 -->
				<div class="chengshifuwu mt-48">
					<div class="flex justify-around">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/shuzibolanguan@3x.png"
							mode="widthFix" class="w-full" @click="$tab.nav(`/pages/index/library/index`)"
							style="width: 364rpx;"></image>
					</div>

					<div class="py-16 round-8 px-20 flex items-center justify-between mt-32"
						style="background-color: #FFE6B5;" @click="$tab.nav(`/pages/index/franchise/list?type=2`)">
						<div class="flex items-center">
							<image
								src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zhaoshang@2x.png"
								mode="" class="image-80"></image>
							<div class="text-32 ml-20 font-500">产业招商</div>
						</div>

						<div class="flex items-center">
							<div class="" style="color: #999999;">查看详情</div>
							<u-icon name="arrow-right" color="#999999" :bold="true"></u-icon>
						</div>
					</div>

					<div class="py-16 round-8 px-20 flex items-center justify-between mt-32"
						style="background-color: #FFE6B5;">
						<div class="flex items-center">
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/daka@2x.png"
								mode="" class="image-80"></image>
							<div class="text-32 ml-20 font-500">达人打卡</div>
						</div>

						<div class="flex items-center">
							<div class="" style="color: #999999;">查看详情</div>
							<u-icon name="arrow-right" color="#999999" :bold="true"></u-icon>
						</div>
					</div>

					<div class="py-16 round-8 px-20 flex items-center justify-between mt-32"
						style="background-color: #FFE6B5;">
						<div class="flex items-center">
							<image
								src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/wenchuang@2x.png"
								mode="" class="image-80"></image>
							<div class="text-32 ml-20 font-500">文创招募</div>
						</div>

						<div class="flex items-center">
							<div class="" style="color: #999999;">查看详情</div>
							<u-icon name="arrow-right" color="#999999" :bold="true"></u-icon>
						</div>
					</div>
				</div>
				<!-- #endif -->




				<div class="" style="height: 50rpx;"></div>
			</div>
		</div>



		<u-no-network></u-no-network>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>

		<!-- s APP版本更新 -->
		<update ref="myUpdataModel"></update>
		<!-- E APP版本更新-->

		<u-back-top :scroll-top="scrollTop" :customStyle="{
			background: '#FD7F28',
			boxShadow: '0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3)'
		}" :iconStyle="{
			color: '#FFF',
			fontWeight: 'bold',
			fontSize: '40rpx'
		}"></u-back-top>

		<u-popup :show="redEnvelopeShow" @close="handleRedClose" mode="center" round="16" bgColor="transparent"
			:closeable="true">
			<view class="redEnvelope-wrap relative" @click="handleRedClose">
				<view class="flex flex-col items-center redEnvelope-content">
					<view class="font-500" style="font-size: 64rpx;">
						支付成功
					</view>
					<view class="redEnvelope-title font-500 mt-32">
						恭喜您获得获得金积分
					</view>
					<view class="redEnvelope-price">
						{{ payStoreGetPrice }}
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/kai@2x.png" class="kai"
						:class="{
							'kai-animation': redEnvelopeAnimation
						}" mode=""></image>
				</view>
			</view>
		</u-popup>

		<u-popup :show="redEnvelopeEndShow" mode="center" round="16" bgColor="transparent">
			<view class="redEnvelope-wrap-end">

			</view>
		</u-popup>

		<!-- 店铺支付 -->
		<Exchange :show="payStoreShow" :form="payStoreForm" @close="payStoreClose"></Exchange>
	</view>
</template>

<script>
import update from '@/components/update/update'
import {
	getToken
} from "@/utils/auth.js"

export default {
	components: {
		update
	},
	data() {
		return {
			globalConfig: getApp().globalData.config,
			scrollTop: 0,
			loading: false,
			statusbarHeight: uni.getSystemInfoSync().statusBarHeight,
			navBg: "transparent",

			// 支付弹窗
			payStoreForm: null,
			payStoreShow: false,
			payStoreGetPrice: 0,

			// 红包动画相关
			redEnvelopeShow: false,
			redEnvelopeEndShow: false,
			redEnvelopeAnimation: false,

			// 企业专区类型
			qiyeTypeList: [],
			qiyeTypeIndex: 0,
			qiyeVideoList: [],

			sanList: [],

			zichanId: null,

			prodList: [],
			shopList: []

		}
	},
	onLoad(e) {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
		// #endif

		this.loading = true
		this.getData()
		//#ifdef APP
		this.$nextTick(() => {
				this.$refs.myUpdataModel.updateVersion()
			})
		// if (process.env.NODE_ENV === 'development') {
		// 	console.log('开发环境');
		// } else {
		// 	this.$nextTick(() => {
		// 		this.$refs.myUpdataModel.updateVersion()
		// 	})
		// }
		//#endif

		/**
		 * 小程序绑定上级逻辑
		 */
		let q = null
		if (e.q) {
			q = decodeURIComponent(e.q)
		} else if (uni.getStorageSync('q')) {
			q = uni.getStorageSync('q')
			uni.removeStorageSync('q')
		}
		if (q != null) {
			if (getToken()) {
				let tem = q.split('&')
				this.payStoreForm = {
					inviteCode: tem[0].split('?')[1],
					name: tem[1].split('=')[1],
					rate: tem[2].split('=')[1],
					payWay: 0,
					price: "",
					// divideType: 1,
					storeName: tem[3].split('=')[1],
					openBalancePay: tem[4].split('=')[1],
				}
				this.$Api.user.bindSuperiorByInviteCode(tem[0].split('?')[1])
				this.payStoreShow = true
			} else {
				uni.setStorageSync('q', q)
				uni.reLaunch({
					url: '/pages/login'
				})
			}
		}
	},
	onShareAppMessage() {

	},
	onReady() { },
	onShow() {

	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop > 30) {
			this.navBg = 'linear-gradient(90deg, #FF323B 0%, #FD8D24 100%)'
		} else {
			this.navBg = 'transparent'
		}
	},
	methods: {
		handleUrl(url) {
			if (url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1) {
				return url
			} else {
				return this.globalConfig.imagePrefix + url
			}
		},
		goDetail(id) {
			this.$tab.nav(`/pages/shops/detail?id=${id}`)
		},
		scan() {
			uni.scanCode({
				scanType: ['qrCode'],
				success: (res) => {
					let url = res.result
					if (url.indexOf('https://d.fulewanjia.com') == 0) {
						let tem = url.split('&')
						this.payStoreForm = {
							inviteCode: tem[0].split('?')[1],
							name: tem[1].split('=')[1],
							rate: tem[2].split('=')[1],
							// #ifdef APP
							payWay: 2,
							// #endif
							// #ifdef MP-WEIXIN
							payWay: 0,
							// #endif
							price: "",
							divideType: 1,
							storeName: tem[3].split('=')[1],
							openBalancePay: tem[4].split('=')[1],
						}
						this.payStoreShow = true
					} else {
						this.$modal.msg('暂不支持此APP外的其他二维码!')
					}
				}
			})
		},
		goShopDetal(item) {
			this.$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)
		},
		// 获取企业类型视频 
		async getQiyeVideoList(index) {
			const res = await this.$Api.enterprise.shortVideoList({
				pageNum: 1,
				pageSize: 5,
				type: this.qiyeTypeList[index].id
			})
			this.qiyeVideoList = res.rows
			this.qiyeTypeIndex = index
		},
		payStoreClose(jinjifen) {
			this.payStoreShow = false
			if (jinjifen) {
				this.redEnvelopeShow = true
				this.payStoreGetPrice = jinjifen
			}
		},
		handleRedClose() {
			this.redEnvelopeAnimation = true
			setTimeout(() => {
				this.redEnvelopeShow = false
				this.redEnvelopeEndShow = true
				this.redEnvelopeAnimation = false
				this.redEnvalopeIndex = 2
				setTimeout(() => {
					this.redEnvelopeEndShow = false
				}, 1500)
			}, 2000)
			return
			if (this.redEnvalopeIndex == 1) {
				this.redEnvelopeAnimation = true
				setTimeout(() => {
					this.redEnvelopeShow = false
					this.redEnvelopeEndShow = true
					this.redEnvelopeAnimation = false
					this.redEnvalopeIndex = 2
					setTimeout(() => {
						this.redEnvelopeEndShow = false
						this.redEnvelopeShow = true
					}, 1500)
				}, 2000)
			} else {
				this.redEnvelopeAnimation = true
				setTimeout(() => {
					this.redEnvelopeShow = false
					this.redEnvelopeEndShow = true
					this.redEnvelopeAnimation = false
					setTimeout(() => {
						this.redEnvelopeEndShow = false
					}, 1500)
				}, 2000)
			}
		},


		async getData() {
			// 获取企业专区类型
			let res = await this.$Api.common.typeChildrenAll({
				code: "index_video_type"
			})

			this.qiyeTypeList = res.data
			this.getQiyeVideoList(0)
			this.loading = false

			// 获取三商品
			// const res2 = await this.$Api.index.getJinjifenInfo()
			// console.log(res2)

			// this.sanList = res2.data.filter(item=>{
			// 	if(item.columnType == 13){
			// 		this.zichanId = item.id
			// 	}
			// 	return item.columnType != 13
			// })

			// 显示俩个商品
			this.$Api.index.getProductsList({
				pageNum: 1,
				pageSize: 2,
				columnType: 5
			}).then((res) => {
				this.prodList = res.rows
			})

			const shopList = await this.$Api.index.storeList({
				pageNum: 1,
				pageSize: 2,
				prefecture: 0
			})

			console.log(shopList)

			this.shopList = shopList.rows
		},
	}
}
</script>

<style lang="scss" scoped>
.index-bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}



@keyframes float {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
	}
}

/* 定义关键帧 */
@keyframes fadeIn {
	from {
		right: -72rpx;
	}

	to {
		right: 0rpx;
	}
}

.redEnvelope-wrap {
	width: 628rpx;
	height: 880rpx;
	background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_hongbao@2x.png) no-repeat;
	background-size: 100% 100%;
	padding: 116rpx 0 22rpx 0;
	color: #E9CA9A;
	animation: fadeIn 1.5s forwards;

	.redEnvelope-price {
		font-size: 100rpx;
		font-weight: 700;
		margin-top: 78rpx;
	}

	.kai {
		width: 148rpx;
		height: 148rpx;
		position: absolute;
		left: calc(50% - 74rpx);
		bottom: 158rpx;
	}

	.kai-animation {
		animation: float 2s forwards;
		transform-style: preserve-3d;
	}
}

.redEnvelope-wrap-end {
	width: 750rpx;
	height: 750rpx;
	background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_linquchenggong@3x.png) no-repeat;
	background-size: 100% 100%;
}


.nav-bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
}

.nav {
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.content {
	position: relative;
	z-index: 2;
	overflow: hidden;

	.nav-logo {
		width: 412rpx;
		height: 104rpx;
	}

	.nav-gif {
		width: 380rpx;
		height: 380rpx;
		position: absolute;
		right: -90rpx;
		top: -166rpx;
	}

	.scan {
		position: absolute;
		right: 32rpx;
		top: 20rpx;
		z-index: 99;
	}

	.fulegongshe {
		width: 710rpx;
		height: 880rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/fulegongshe4@3x.png) no-repeat;
		background-size: 100% 100%;
		padding: 300rpx 24rpx 0 24rpx;


		.fulegongshe-bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.shangdoudaren {
			width: 360rpx;
			height: 240rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/img_shangdoudaren@3x.png) no-repeat;
			background-size: 100% 100%;
		}

		.shangdoujiaoyi {
			width: 360rpx;
			height: 240rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/img_shangdoujiaoyimingxi@3x.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			top: 0;
		}

		.fulegongshe-shadow {
			box-shadow: 4rpx 4rpx 2rpx 0px #90553A;
		}

		.fulegongshe-li-img-1 {
			width: 208rpx;
			height: 208rpx;
		}

		.fulegongshe-li-img-2 {
			width: 208rpx;
			height: 260rpx;
			box-shadow: 4rpx 4rpx 2rpx 0px #90553A;
			border-radius: 24rpx;
		}
	}

	.shangjiazhuanqu {
		.shangjiazhuanqu-di {
			width: 710rpx;
			height: 720rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.shangjiazhuanqu-content {
			position: relative;
			z-index: 2;
			padding: 372rpx 24rpx 0 24rpx;

			.shangjiazhuanqu-chakanquanbu {
				width: 662rpx;
				height: 170rpx;
				box-shadow: 4rpx 4rpx 2rpx 0px rgba(0, 0, 0, 0.3);
			}

			.shangjiazhuanqu-img {
				width: 208rpx;
				height: 240rpx;
				box-shadow: 4rpx 4rpx 2rpx 0px rgba(0, 0, 0, 0.3);
				border-radius: 24rpx;
			}
		}
	}

	.qiyezhuanqu {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/qiyezhuanqu@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 304rpx 20rpx 32rpx 20rpx;

		.qiye-line {
			width: 662rpx;
			height: 0rpx;
			border: 2rpx solid #C2C2C2;
			opacity: 0.4;
		}

		.poster {
			min-width: 560rpx;
			height: 314rpx;
			position: relative;

			.play {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.quweiixiaofeijie {
			width: 208rpx;
			height: 240rpx;
			box-shadow: 4rpx 4rpx 2rpx 0px rgba(0, 0, 0, 0.3);
		}

		// .pingpaijiameng {
		// 	width: 342rpx;
		// 	height: 144rpx;
		// }

		// .kuaguomaoyi {
		// 	width: 342rpx;
		// 	height: 144rpx;
		// }
	}

	.chengshifuwu {
		height: 980rpx;
		padding: 354rpx 28rpx 0 28rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages4/bg@3x.png) no-repeat;
		background-size: 100% 100%;
	}
}

.shop-box {
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.16);

	.shop-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #C4C4C4;
	}

	.go-shop {
		width: 136rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		border-radius: 210rpx 210rpx 210rpx 210rpx;
		line-height: 56rpx;
	}

	.commodity {
		width: 172rpx;
		height: 172rpx;
		border-radius: 8rpx;
	}

	.show-more {
		min-width: 172rpx;
		height: 172rpx;
		border-radius: 8rpx;
		line-height: 172rpx;
		text-align: center;
		background-color: #B4A59B;
		color: #FFF;
	}

	.price-comm {
		width: 100%;
		height: 38rpx;
		background: rgba(0, 0, 0, .4);
		position: absolute;
		left: 0;
		bottom: 0;
		border-radius: 0 0 8rpx 8rpx;
		line-height: 38rpx;
	}

	.shoping {
		width: 76rpx;
		height: 28rpx;
		background: #FFBE26;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		position: absolute;
		left: 16rpx;
		top: 16rpx;
	}

	.rest {
		width: 176rpx;
		height: 176rpx;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;

		image {
			width: 80rpx;
			height: 74rpx;
		}
	}
}
</style>